Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@property --val {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
//property only required to animate in css, if animating via Javascript this might not be required.
.progress-field {
  --w: 4rem;
  --l: 15rem;
  //--fill-clr: #AEE1CD;
  --bg: #F9F6EF20;
  --shdw:  inset 0 0 1rem #fff2, inset 0 0 2rem #0005;
  --lft: calc(var(--val) / var(--max) * var(--l));
  --bdr: .1rem;
  width: var(--l);
  height: var(--w);
  box-sizing: border-box;
  transform-style: preserve-3d;
  position: relative;
  background-image: 
    linear-gradient(
      90deg,
      var(--fill-clr) var(--lft),
      var(--bg) 0
    );
  box-shadow: var(--shdw);
  border-radius: var(--bdr);
  transform: 
    rotatex(15deg)
    rotatey(-50deg)
    rotatez(2deg);
  animation: rot 5s infinite both alternate, ani-val 10s infinite both alternate;
}
@keyframes rot {
  
  to {
    transform: 
    rotatex(15deg)
    rotatey(50deg)
    rotatez(2deg);
    --val: var(--max);
  }
}
@keyframes ani-val {
  from {
    --val: 0;
  }
  to {
    --val: var(--max);
  }
}
.progress-field .progress {
  border-radius: var(--bdr);
  box-sizing: border-box;
  transform-style: preserve-3d;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: var(--l);
  height: var(--w);
  transform-origin: top;
  transform: rotatex(90deg);
  background-image: 
    linear-gradient(
      90deg,
      var(--fill-clr) var(--lft),
      var(--bg) 0
    );
}

.progress:before {
  transform-style: preserve-3d;
  box-sizing: border-box;
  position: absolute;
  content: '';
  inset: 0;
  transform: rotatex(90deg);
  transform-origin: left bottom;
  background-color: var(--bg);
  box-shadow: var(--shdw);
  border-radius: var(--bdr);
  color: white;
}

.progress-field:before,
.progress-field:after, 
.progress:after {
  box-sizing: border-box;
  position: absolute;
  content: '';
  width: var(--w);
  height: var(--w);
  left: var(--l);
  top: 0;
  background-color: var(--bg);
  box-shadow: var(--shdw);
  border-radius: var(--bdr);
  transform-origin: left top;
  transform: 
    rotatey(90deg);
  
}
.progress-field:after {
  transform: rotatey(-90deg);
  
  left: var(--lft);
  transform-origin: left top;
  background-color: var(--fill-clr);
}
.progress-field:before {

transform: 
    rotatey(90deg) translatex(-100%);
  left: 0;
  background-color: var(--fill-clr);
  
}
.progress-field:before,
.progress-field:after {
  content: counter(num);
  counter-reset: num var(--val);
  display: grid;
  place-content: center;
  color: #0007;
  font-size: 1rem;
  font-family: system-ui, sans-serif;
  font-weight: 900;
  animation: ani-val 10s infinite both alternate;
}
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  gap: 10vmin;
  place-content: center;
  background: #25282A;
}

Frontend Forever App